<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/mainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">
    
    <ui:define name="content">
        <h:form >
            <p:growl id="growl" showDetail="true" sticky="false" life="3000"/> 
            <p:panel header="#{gestorPrincipal.cabeceraArticulo}" style="padding: 10px 10px 10px 10px">
                <p:dataGrid columns="1" rows="10" paginator="true" value="#{gestorPrincipal.foros}" var="foro" 
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                    
                    
                    <h:outputText value="#{foro.nombre}" style="font-weight: bold"/>
                    <h:panelGrid columns="2" style="width: 100%">
                        <p:graphicImage value="#{gestorPrincipal.getImagen(foro)}" width="80px" height="60px"/> 
                        <h:panelGrid columns="1" style="width: 100%">
                            <h:outputText value="#{gestorPrincipal.formattedDate(foro.fecha)}"/>
                            <h:outputText value="#{gestorPrincipal.acortadorTexto200(foro.descripcion)}" escape="false" style="font"/>
                            <p:commandButton value="Ingresar" style="float: right" icon="ui-icon-grip-dotted-vertical" action="#{gestorPrincipal.mostrarForo()}">
                                <f:setPropertyActionListener value="#{foro}"  target="#{gestorPrincipal.foroseleccionado}" />
                            </p:commandButton>
                        </h:panelGrid>
                    </h:panelGrid>
                    <p:separator/>
                </p:dataGrid>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>